<template>
<div class="pcSchool">
	<!--导航栏-->
		<div class="t_banner">
			<img src="../assets/index/index_10.jpg" alt="" class="ban_fix_all" />
			<div class="t_banner_back_all"> 
				
			</div>
		<div class="dh_pc">
			<div class="logo">
				<img src="../assets/logo.png"/>
			</div>
			<div style="width:30%;"></div>
			<div class="dh_list">
				<ul class="dh_ul">
					 <!--v-for="site in lilist"-->
					 <!-- :class="{dh_ul_li:site.index != dhindex,'dhli':site.index == dhindex}"-->
					<li><router-link :to="{name: 'pcindex'}">首页</router-link></li>
					<li  v-on:click="mouseenover()" >
						<div class="bigData"><span>大数据</span><span  :class="{ down: down, 'top': top}"></span>	
						<div class="bigPanel" v-show="bigDataPanel">		
								<p v-for="data in bigDataList" v-on:click="choseData(data.name,data.index)">{{data.name}}</p>
						</div>
					 </div>	
					</li>
					<li v-on:mouseover="mouseenoverone()"><span>测试测评</span><span  :class="{ down: onedown, 'top': onetop}"></span></li>
					<li v-on:mouseover="mouseenovertwo()"><span>志愿填报</span><span  :class="{ down: towdown, 'top': towtop}"></span></li>
					<li>有问必答</li>
					<li>新闻资讯</li>
				</ul>
			</div>
		</div>
		<!---->
		<div class="dh_pc_title">
			<div class="dh_pc_title_b">院校大全</div>
		</div>
		
	</div>
 <div class="fiexd">
 	<!--导航-->
     <div class="search_dh">
        <ul>
        	<li><span><router-link :to="{name: 'pcindex'}"> 首页</router-link></span></li>
        	<li><span class="dh_j">></span></li>
        	<li><span>大数据</span></li>
        	<li><span class="dh_j">></span></li>
        	<li><span><router-link :to="{name: 'pcSchool'}">院校大全</router-link></span></li>
        </ul>
     </div>
     <!--搜索-->
     <div class="screen">
     	<!--搜索框-->
     	<div class="s_find">
     		<div class="s_find_s">
     			<div class="s_find_b">
     				<img src="../assets/index/find_03.png"/>			
     			</div>
     			<input type="text"  name="find" placeholder="查找学校" id="find_s" v-on:input ="inputFunc"/>
     		</div>
     	</div>
     	<!--地址筛选-->
     	<div class="address">
     		<div class="subnav-box">
     			<dl class="clear">
     				<dt><i class="turn_top"></i><span>院校属地</span></dt>
     				<!--<dt><span>不限</span></dt>-->
     				<dd>	
     					<ul>
     						
     						<li  v-for="site in lists" v-on:click="choseAddress(site.index,site.local)"  :class="{active:site.index == Address,'tag':site.index!=Address }">
     							{{site.local}}</li>
     					</ul>
     				</dd>
     			</dl>
     			<!--学校类型-->
     			<dl class="clear">
     				<dt><i class="turn_top"></i><span>院校类型</span></dt>
     				<!--<dt><span>不限</span></dt>-->
     				<dd>	
     					<ul>
     						<li  v-for="site in shtype" v-on:click="choseshtype(site.index,site.local)"  :class="{active:site.index == shtypeindex,'tag':site.index!=shtypeindex }">
     							{{site.local}}</li>
     					</ul>
     				</dd>
     			</dl>
     			<!--办学性质-->
     			<dl class="clear"  >
     				<dt><i class="turn_top"></i><span>办学性质</span></dt>
     				<!--<dt><span>不限</span></dt>-->
     				<dd>	
     					<ul>
     						<li v-for="site in degreeList" v-on:click="chosedegreeList(site.index,site.local)"  :class="{active:site.index == degreeListindex,'tag':site.index!=degreeListindex }">
     							{{site.local}}</li>
     					</ul>
     				</dd>
     			</dl>
     			<!--学历层次-->
     			<dl class="clear">
     				<dt><i class="turn_top"></i><span>学历层次</span></dt>
     				<!--<dt><span>不限</span></dt>-->
     				<dd>	
     					<ul>
     						<li  v-for="site in natureList" v-on:click="chosenatureList(site.index,site.local)"  :class="{active:site.index == natureListindex,'tag':site.index!=natureListindex }">
     							{{site.local}}</li>
     					</ul>
     				</dd>
     			</dl>
     			<!--院校特色-->
     			<dl class="clear">
     				<dt><i class="turn_top"></i><span>院校特色</span></dt>
     				<!--<dt><span>不限</span></dt>-->
     				<dd>	
     					<ul>
     						<li  v-for="site in natureList" v-on:click="chosefeaturesList(site.index,site.local)"  :class="{active:site.index == featuresListindex,'tag':site.index!=featuresListindex }">
     							{{site.local}}</li>
     					</ul>
     				</dd>
     			</dl>
     			<!--招生年份-->
     			<dl class="clear">
     				<dt><i class="turn_top"></i><span>招生年份</span></dt>
     				<!--<dt><span>不限</span></dt>-->
     				<dd>	
     					<ul>
     						<li  v-for="site in studentList" v-on:click="chosestudentList(site.index,site.local)"  :class="{active:site.index == studentListindex,'tag':site.index!=studentListindex }">
     							{{site.local}}</li>
     					</ul>
     				</dd>
     			</dl>
     			<!--生源地-->
     			<dl class="clear">
     				<dt class="localList"><i class="turn_top"></i><span>生源地</span></dt>
     				<!--<dt><span>不限</span></dt>-->
     				<dd>	
     					<ul>
     						<li  v-for="site in localList" v-on:click="choselocalList(site.index,site.local)"  :class="{active:site.index == localListindex,'tag':site.index!=localListindex }">
     							{{site.local}}</li>
     					</ul>
     				</dd>
     			</dl>
     		</div>
     	</div>
     	<!--学校排序-->
     	<div class="school">
     		<!--排序按钮-->
     		<div class="s_sort">
     			<ul>
     				<li v-for='site in schooList'>
     					<div :class="{s_name:site.index !=sortIndex,'s_sort_chose':site.index == sortIndex}" v-on:click="choseSort(site.index)">
     						<span :class="{sortActive:site.index == sortIndex,'sortNot':site.index != sortIndex }">{{site.local}}</span>
     						<img src="../assets/pcschool/s_05.png" alt="" v-show="sortNot"/>
     						<img src="../assets/pcschool/s_03.png" alt="" v-show="sortActive"/>
     					</div>
     					
     				</li>			
     			</ul>
     		</div>
     		<!--学校列表-->
     		<div class="s_list">
     			<div class="s_n_list">
     				<div class="s_cont">
     					<ul>
     						<li>
     							<div class="cont_n">
     								<div class="cont_logo">
     									<router-link :to="{name:'introduce'}">
     									<img src="../assets/pcschool/s_10.png" alt="" />
     									</router-link>
     								</div>
     								<div class="cont_center">
     									<div class="cont_intr">
     										<div class="cont_intr_left">
     											<div class="s_school_name">
     												<span>清华大学</span><span>Tsinghua University</span>
     											</div>
     											<div class="s_name_sort">
     												<ul>
     													<li><span>双一流</span></li>
     													<li><span>211</span></li>
     													<li><span>985</span></li>
     													<li><span>工科院校</span></li>
     													<li><span>研究生院</span></li>
     												</ul>
     											</div>
     										</div>
     										<div class="s_school_button">
     										  <ul class="s_cont_find">
     										  	<li><span>测录取概率</span></li>
     										  	<li><span>查录取分数线</span></li>
     										  </ul>
     										  <ul class="s_contrast">
     										  	<li><span>关注</span></li>
     										  	<li><span>对比</span></li>
     										  </ul>
     									  </div>
     									</div>	
     								</div>
     							</div>
     						</li>
     						<li>
     							<div class="cont_n">
     								<div class="cont_logo"><img src="../assets/pcschool/s_10.png" alt="" /></div>
     								<div class="cont_center">
     									<div class="cont_intr">
     										<div class="cont_intr_left">
     											<div class="s_school_name">
     												<span>清华大学</span><span>Tsinghua University</span>
     											</div>
     											<div class="s_name_sort">
     												<ul>
     													<li><span>双一流</span></li>
     													<li><span>211</span></li>
     													<li><span>985</span></li>
     													<li><span>工科院校</span></li>
     													<li><span>研究生院</span></li>
     												</ul>
     											</div>
     										</div>
     										<div class="s_school_button">
     										  <ul class="s_cont_find">
     										  	<li><span>测录取概率</span></li>
     										  	<li><span>查录取分数线</span></li>
     										  </ul>
     										  <ul class="s_contrast">
     										  	<li><span>关注</span></li>
     										  	<li><span>对比</span></li>
     										  </ul>
     									  </div>
     									</div>	
     								</div>
     							</div>
     						</li>
     						<li>
     							<div class="cont_n">
     								<div class="cont_logo"><img src="../assets/pcschool/s_10.png" alt="" /></div>
     								<div class="cont_center">
     									<div class="cont_intr">
     										<div class="cont_intr_left">
     											<div class="s_school_name">
     												<span>清华大学</span><span>Tsinghua University</span>
     											</div>
     											<div class="s_name_sort">
     												<ul>
     													<li><span>双一流</span></li>
     													<li><span>211</span></li>
     													<li><span>985</span></li>
     													<li><span>工科院校</span></li>
     													<li><span>研究生院</span></li>
     												</ul>
     											</div>
     										</div>
     										<div class="s_school_button">
     										  <ul class="s_cont_find">
     										  	<li><span>测录取概率</span></li>
     										  	<li><span>查录取分数线</span></li>
     										  </ul>
     										  <ul class="s_contrast">
     										  	<li><span>关注</span></li>
     										  	<li><span>对比</span></li>
     										  </ul>
     									  </div>
     									</div>	
     							<!--切换按钮-->
     						    <div class="s_tab">
     						  	   <div class="s_tab_k">
     						  		<span><img src="../assets/pcschool/sc_03.png" alt="" /></span>
     						  		<span><img src="../assets/pcschool/sc_05.png" alt="" /></span>
     						  	</div>
     						  </div>	
     								</div>
     							</div>
     						</li>
                             
                           <li>
     						  
     						</li>
     					</ul>
     				</div>
     			</div>
     		</div>
     	</div>
     </div>
 </div>
</div>
</template>

<script>
	export default{
		name:'pcSchool',
		data(){
			return{
				Address:0,//学校地区
				shtypeindex:0,//学校类型
				degreeListindex:0,//办学性质
				natureListindex:0,//学历层次
				featuresListindex:0,//院校特色
				studentListindex:0,//招生年份
				localListindex:0,//生源地
				sortIndex:0, //学校排序
				sortActive:false,//学校排序选中状态
				sortNot:true,  //学校排序未选中状态
			    down:true,  //大数据
			    top:false,   //大数据
			  onedown:true,  //测试测评
			  onetop:false,   //测试测评
			  towdown:true,  //智能志愿
			  towtop:false,  //智能志愿
			  bigDataPanel:false,  //大数据面板
			  dhindex:1,     //导航下标
			  catdhindex:1,    //主要导航下标
			  //获取输入框的值--查找学校
			  inputValue:'',
			  bigDataList:[   //大数据内容
			   {name:'院校大全',index:1},
			   {name:'专业大全',index:2},
			   
			 ],
				lists:[ //学校地区
					 {local:'不限',index:0,show:false},

					 {local:'安徽',index:1,show:false},
					 {local:'北京',index:2,show:false},
					 {local:'重庆',index:3,show:false},
					 {local:'广州',index:4,show:false},
					 {local:'河北',index:5,show:false},
					 {local:'河西',index:7,show:false},
					 {local:'河南',index:8,show:false},
					 {local:'澳门',index:9,show:false},
					 {local:'湖北',index:10,show:false},
					 {local:'福建',index:11,show:false},
					 {local:'湖南',index:12,show:false},
					 {local:'四川',index:13,show:false},
					 {local:'云南',index:14,show:false},
					 {local:'西藏',index:15,show:false},
					 {local:'青海',index:16,show:false},  
					],
					//院校类型
				 shtype:[
				      {local:'不限',index:0,show:false},
					 {local:'综合类',index:1,show:false},
					 {local:'语言类',index:2,show:false},
					 {local:'工科类',index:3,show:false},
					 {local:'医药类',index:4,show:false},
					 {local:'体育类',index:5,show:false},
					 {local:'财经类',index:7,show:false},
					 {local:'艺术类',index:8,show:false},
					 {local:'民族类',index:9,show:false},
					 {local:'师范类',index:10,show:false},
					 {local:'林业类',index:11,show:false},
				 ],
				 //办学性质
				 degreeList:[
				     {local:'不限',index:0,show:false},
					 {local:'民办',index:1,show:false},
					 {local:'公办',index:2,show:false},
				 ],
				 //学历层次
				 natureList:[
				     {local:'不限',index:0,show:false},
					 {local:'本科',index:1,show:false},
					 {local:'专科',index:2,show:false},
				 ],
				 //院校特色
				 featuresList:[
				     {local:'不限',index:0,show:false},
					 {local:'211',index:1,show:false},
					 {local:'985',index:2,show:false},
					 {local:'研究生院',index:3,show:false},
				 ],
				 //招生年份
				 studentList:[
				     {local:'不限',index:0,show:false},
					 {local:'2018',index:1,show:false},
					 {local:'2017',index:2,show:false},
					 {local:'2016',index:3,show:false},
					 {local:'2015',index:4,show:false},
					 {local:'2014',index:5,show:false},
					 {local:'2013',index:6,show:false},
				 ],
				 //生源地
				 localList:[
				    {local:'不限',index:0,show:false},
					 {local:'安徽',index:1,show:false},
					 {local:'北京',index:2,show:false},
					 {local:'重庆',index:3,show:false},
					 {local:'广州',index:4,show:false},
					 {local:'河北',index:5,show:false},
					 {local:'河西',index:6,show:false},
					 {local:'河南',index:7,show:false},
					 {local:'澳门',index:8,show:false},
					 {local:'湖北',index:9,show:false},
					 {local:'福建',index:10,show:false},
					 {local:'湖南',index:11,show:false},
					 {local:'四川',index:12,show:false},
					 {local:'云南',index:13,show:false},
					 {local:'西藏',index:14,show:false},
					 {local:'青海',index:15,show:false},  
				 ],
			     //学校排序
			     schooList:[
			       {local:'薪酬排名',index:0},
			       {local:'武书连排名',index:1},
			       {local:'中国校友会网排名',index:2},
			       {local:'US NEWS排名',index:3},
			       {local:'QS排名',index:4}
			     ]
			}
		},

		  //页面渲染完成，再挂载html
           mounted(){
           	console.log(this.globel.http)
           	//获取院校信息
//         	this.$ajax({
//         		method:'get',
//         		url: '/schools/details',
//         		data:{
//         			schoolName:'清华'
//         		},
//         		success:function(data){
//         			console.log(data)
//         		}
//         	})
           
           },

		methods:{
			limit:function(){
				
			},
			//获取输入框的输入值
			inputFunc:function(){
				var x = document.getElementById('find_s').value;
				this.inputValue = x
//				console.log(this.inputValue)
			},
			
			   	//大数据
			mouseenover:function(){
				this.down = !this.down;
				this.top = !this.top;
				this.bigDataPanel = !this.bigDataPanel;
			},
			//选择大数据
			choseData:function(name,index){
				console.log(name)
				this.bigDataPanel = true;
				this.down = false;
				this.top = true;
				if(index == 1){
					this.$router.push({
                    path:'/pc/pcSchool'
                })//pc端
				}
				else if(index == 2){
					this.$router.push({
                    path:'/pc/pcProfes'
                })//pc端
				}
			},
			//测试测评
			mouseenoverone:function(){
				this.onedown = !this.onedown;
				this.onetop = !this.onetop;
			},
			//智能志愿
			mouseenovertwo:function(){
				this.towdown = !this.towdown;
				this.towtop = !this.towtop;
			},
			//选择地址
			choseAddress:function(Address,name){
				console.log(Address)
				this.Address = Address;
			},
			//院校类型
			choseshtype:function(shtype,name){
				this.shtypeindex = shtype;
				console.log(shtype,name)
			},
			//办学性质
			chosedegreeList:function(degreeList,name){
				this.degreeListindex = degreeList;
			},
			//学历层次
			chosenatureList:function(natureList,name){
				this.natureListindex = natureList;
			},
			//院校tese
			chosefeaturesList:function(featuresList,name){
				this.featuresListindex = featuresList;
			},
			//招生年份
			chosestudentList:function(studentList,name){
				this.studentListindex = studentList;
			},
			//生源地
			choselocalList:function(localList,name){
				this.localListindex = localList;
			},
			//排序按钮
			choseSort:function(index){
				console.log(index)
				this.sortIndex = index;
//				if(this.sortIndex == index){
//					this.sortNot = false;
//					this.sortActive = true;
//				}
//				else{
//					this.sortNot = true;
//					this.sortActive = false;
//				}
			}
		}
	}
</script>

<style>
	.ban_fix_all{width:100%;height:265px;}
	.t_banner_back_all{width:100%;height:265px;background-color:#000000;position: absolute;top:0px;opacity: 0.5;}
	.dh_pc_title{width:1200px;position: absolute;left:50%;margin-left:-600px;bottom:30px;display:flex;display:-webkit-flex;display:-ms-flex;}
	.dh_pc_title_b{border-left:4px solid #ffb607;height:50px;line-height: 50px;font-size:30px;color:#ffffff;padding-left:10px;cursor: pointer;}
	@media only screen and (min-width:1100px ) {
		.pcSchool{width:100%;border-top:1px solid #bbbbbb;}
		.fiexd{width:1260px;margin:0 auto;position: relative;padding-left:10px;padding-right:10px;overflow: hidden;}
		.search_dh{width:100%;height:65px;overflow: hidden;line-height: 65px;border-bottom: 1px solid #bbbbbb;}
		.search_dh li{float:left;font-size:14px;color:#9e9e9e;padding-right:5px;}
		.search_dh li span a{color:#9e9e9e;}
		.search_dh .dh_j{color:#444444;}
		/*搜索筛选*/
		.s_find{padding-top:65px;padding-left:200px;padding-right:160px;}
		.s_find_s{width:100%;position: relative;}
		.s_find_b{width:50px;height:50px;background-color:#ffb607;border:1px solid #666666;border-right:none;
		 position:relative;right:-5px;top:2px;display:inline-block;}
		.s_find_b img{position: relative;top:10px;cursor: pointer;left:10px;}
		#find_s{width:91%;height:50px;padding:0px;border:none;border:1px solid #666666;outline: none;vertical-align: middle;
		padding-left:20px;font-size:16px;cursor: pointer;border-left:none;}
		/*地址筛选*/
		.address{margin-top:50px;width:100%;background-color:#f8f8f8;}
		.subnav-box{padding-top:15px;padding-left:20px;padding-right:20px;padding-bottom: 20px;position: relative;overflow: hidden;}
		.subnav-box dl{overflow: hidden;position: relative;}
		.subnav-box dt span{font-size:14px;color:#6c6c6c;cursor: pointer;display:block;padding-left:15px;}
		.subnav-box dt .limit{background-color:#00aff0;color:#ffffff;font-size:14px;display:block}
		.subnav-box dt{float:left;height: 35px;line-height: 35px;font-size: 14px;color: #999;padding-left:5px;padding-right:15px;}
		.subnav-box .localList{padding-right:28px;}
		.turn_top{display:block;width:5px;height:60px;background-color:#ffb607;position: absolute;top:-15px;}
		.subnav-box dl dd ul li {width: auto;height: 28px;line-height: 28px;padding: 0px 20px;float:left;cursor: pointer;margin-bottom: 5px;;}
		.subnav-box dl dd ul{border-bottom: 1px dashed  #cccccc;}
		/*地址筛选*/
		.subnav-box dd li.active {color: #fff; background: #00aff0;}
		.subnav-box dd li.tag{font-size:14px;color:#333;}
		/*学校类型*/
		.subnav-box dd li.shtypeActive{color: #fff; background: #00aff0;}
		.subnav-box dd li.shtypeTag{font-size:14px;color:#333;}
		.subnav-box dl dd{overflow: hidden;}
			.subnav-box dl dd ul{overflow: hidden;}
		/*学校排序*/
		.school{padding-top:45px;}	
        .s_sort{width:100%;overflow:hidden;border-bottom: 1px solid #cccccc;}
	    .s_sort li{float:left;width:20%;cursor: pointer;}
	    .s_name{text-align: center;position: relative;padding-bottom: 20px;;}
	    .s_sort_chose{border-bottom:5px solid #feb707;text-align: center;position: relative;padding-bottom: 20px;}
	    .s_name img{position: relative;top:5px;}
	     .s_sort_chose img{position: relative;top:5px;}
	    /*学校列表*/
	   .s_list{margin-top:55px;width:100%;background-color:#fcfcfc;}
	   .s_n_list{margin-top:40px;padding-left:30px;padding-right:30px;}
	   .s_cont{width:100%;overflow: hidden;position: relative;}
	   .cont_n{display:flex;display: -webkit-box;display: -ms-flexbox;cursor: pointer;margin-bottom: 120px;;}
	   .cont_logo{width:150px;margin-right:40px;}
	   .cont_logo img{}
	   .cont_center{width:84%;height:150px;background-color:#f2f2f2;}
	   .cont_intr{padding:35px 20px 25px 30px;display:flex;display: -webkit-box;display: -ms-flexbox;position: relative;}
	   .cont_intr_left{width:60%;}
	   .s_school_name{text-align: left;margin-bottom: 30px;}
	   .s_sort .sortActive{color:#ffb607;font-size:18px;font-size:18px;display:inline-block;padding-right:40px;}
	    .s_sort .sortNot{font-size:18px;color:#717171;display:inline-block;padding-right:40px;}
	   .s_name_sort{overflow: hidden;position: relative;}
	   .s_name_sort li{float:left;padding:10px 20px 10px 20px;border:1px dashed #ffb607;margin-right:15px;font-size:12px;}
	   .s_school_button{overflow: hidden;position: absolute;right:20px;}
	   .s_cont_find li{float:left;text-align:center;width:125px;height:40px;line-height:40px;background-color:#000000;color:#ffffff;
	   margin-bottom:5px;font-size:12px;margin-left:15px;}
	   .s_contrast li{float:left;width:125px;height:40px;line-height:40px;text-align:center;background-color:#ffb607;color:#3a3a3a;font-size:12px;margin-left:15px;}
       .s_tab{overflow: hidden;position: relative;padding-top:40px;}
       .s_tab_k{text-align: right;}	
       .s_tab_k span{display:inline-block;padding-right:10px;}
	}
</style>